<template>
  <div style="text-align: center; height: 100%">
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8"
        ><el-input placeholder="请输入店铺名" clearable>
          <el-button
            slot="append"
            icon="el-icon-search"
          ></el-button> </el-input></el-col
      ><el-col :span="4">
        <el-button
          type="primary"
          size="mini"
          @click="addProductDialogVisible = true"
          >添加商品</el-button
        >
      </el-col>
    </el-row>

    <!-- 默认为不编辑的只读显示数据 -->
    <div v-if="!isOperation" style="margin-top: 20px">
      <el-table
        :data="tableData"
        stripe
        border
        Scoped
        slot
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="CommodityId" label="商品ID" width="180">
        </el-table-column>
        <el-table-column prop="CommodityName" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="CommodityShopName" label="店铺名称" width="180">
        </el-table-column>

        <el-table-column prop="CommodityMoney" label="价格(元)">
        </el-table-column>
        <el-table-column prop="CreatedTime" label="创建时间"> </el-table-column>
        <el-table-column prop="isActived" label="是否上架">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isActived"
              @change="Statechanged(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <div>
            <el-link
              :underline="false"
              @click="addPictureDialogVisible = true"
              style="color: #4d9eff"
              >添加商品图片</el-link
            >
          </div>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑商品Dialog -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="commodityDialogVisible"
      width="30%"
      center
    >
      <el-form
        :data="tableData"
        :model="editForm"
        ref="editFormRef"
        label-width="70px"
      >
        <!-- 店铺名 -->
        <el-form-item label="商品名称" prop="CommodityName">
          <el-input v-model="editForm.CommodityName"></el-input>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="店铺名称" prop="CommodityShopName">
          <el-input v-model="editForm.CommodityShopName"></el-input>
        </el-form-item>
        <!-- 店铺价格 -->
        <el-form-item label="商品价格" prop="CommodityMoney">
          <el-input v-model="editForm.CommodityMoney"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="commodityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commodityDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 商品图片Dialog -->
    <el-dialog
      title="商品图片"
      :visible.sync="addPictureDialogVisible"
      width="30%"
    >
      <div>
        <!-- 使用添加图片的地方 -->
        <span>
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="3"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </span>
      </div>
    </el-dialog>

    <!-- 添加商品 - dialog -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="addProductDialogVisible"
      width="30%"
      center
    >
      <el-form :data="editForm" :model="addCommodityFrom" label-width="70px">
        <!-- 店铺名 -->
        <el-form-item label="商品名称" prop="CommodityName">
          <el-input v-model="addCommodityFrom.CommodityName"></el-input>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="店铺名称" prop="CommodityShopName">
          <el-input v-model="addCommodityFrom.CommodityShopName"></el-input>
        </el-form-item>
        <!-- 店铺价格 -->
        <el-form-item label="商品价格" prop="CommodityMoney">
          <el-input v-model="addCommodityFrom.CommodityMoney"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCansel">取 消</el-button>
        <el-button type="primary" @click="addCommodity">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted() {
    this.GettableData();
  },
  data() {
    return {
      // 添加图片数据
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      // 表数据 - 源绑定
      tableData: [
        {
          CommodityId: 1,
          CommodityName: "凤梨1",
          CommodityShopName: "闽大第一食堂",
          CommodityMoney: "￥13.00",
          CreatedTime: "2021-08-23 15:55:00",
          isActived: true,
        },
        {
          CommodityId: 2,
          CommodityName: "凤梨2",
          CommodityShopName: "闽大第一食堂",
          CommodityMoney: "￥14.00",
          CreatedTime: "2021-08-23 15:55:00",
          isActived: true,
        },
        {
          CommodityId: 3,
          CommodityName: "凤梨3",
          CommodityShopName: "闽大第一食堂",
          CommodityMoney: "￥15.00",
          CreatedTime: "2021-08-23 15:55:00",
          isActived: true,
        },
      ],
      // 表数据 - 编辑数据
      editForm: {
        CommodityName: "",
        CommodityShopName: "",
        CommodityMoney: "",
      },

      // 表数据 - 添加数据
      addCommodityFrom: {
        CommodityName: "",
        CommodityShopName: "",
        CommodityMoney: "",
      },
      // 编辑商品信息对话框
      commodityDialogVisible: false,
      // 添加图片对话框
      addPictureDialogVisible: false,
      // 添加商品对话框
      addProductDialogVisible: false,
      value: "",
      input: "",
      cs: "123123",
      isOperation: false,
      // 选择店铺名查询还是商品名查询
      options: [
        {
          value: "选项1",
          label: "店铺",
        },
      ],
      // headerStyle(){
      //   return '{text-align: center}'
      // },
      // cellStyle(){
      //   return '{text-align: center}'
      // }
    };
  },
  methods: {
    // 添加图片数据
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 获取商品列表
    async GettableData() {
      // const {data:res} = await this.http.get()
    },
    change(e) {
      this.$forceUpdate(e.value);
      return e;
    },
    headCellClass() {
      return "text-align: center; font-size: 12px";
    },
    headClass() {
      return "text-align: center";
    },
    // 编辑
    async handleEdit(index, row) {
      this.commodityDialogVisible = true;
      this.editForm.CommodityName = row.CommodityName;
      this.editForm.CommodityShopName = row.CommodityShopName;
      this.editForm.CommodityMoney = row.CommodityMoney;
    },
    // 编辑完成
    handleEditOk(index, row) {
      this.isOperation = !this.isOperation;
      console.log(index, row);
    },
    // 添加商品
    addCommodity() {
      alert("添加商品ok");
    },
    // 删除按钮
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 取消按钮
    handleCansel() {
      this.addProductDialogVisible = false;
    },
    Statechanged() {},
  },
};
</script>

<style scoped>
* {
  margin: auto;
  list-style: none;
}
.el-table-column {
  margin: 0px;
}
.el-form-item {
  margin-top: 1rem;
}
.el-bottom {
}
</style>
